<template>
	<div class="content-wrapper workDeliver-wrapper">
		<div class="searches-wrapper">
			<div class="buttons-wrapper">
				<span class="systemButtonAdd" @click="handleDetail">新增移交</span>
			</div>
			<div class="query-wrapper">
				<div class="query-box">
					<span class="span-name">移交人：</span>
					<el-input class="systemInput" placeholder="请输入移交人员" v-model="workDeliver.fromUser"></el-input>
				</div>
				<div class="query-box">
					<span class="span-name">接收人：</span>
					<el-input placeholder="请输入接收人员" v-model="workDeliver.toUser"></el-input>
				</div>
				<div class="query-box">
					<span class="span-name">移交内容：</span>
					<el-input class="systemInput" placeholder="请输入移交内容" v-model="workDeliver.name"></el-input>
				</div>
				<span class="query-box systemButtonConfirm" @click="search">查询</span>
			</div>
		</div>
		<el-table class="systemTable" :data="tableData" stripe :height="tableHeight">
			<el-table-column prop="name" label="移交名称" width="120"></el-table-column>
			<el-table-column prop="fromUser" label="移交人员" width="120"></el-table-column>
			<el-table-column prop="toUser" label="接收人员" width="120"></el-table-column>
			<el-table-column prop="type" label="移交类型" width="120">
				<template slot-scope="scoped">
					<span>{{scoped.row.type?'流程':'计划'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="timeLength" label="移交类型" width="120">
				<template slot-scope="scoped">
					<span>{{scoped.row.timeLength?'暂时':'永久'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="fromDate" label="开始时间"></el-table-column>
			<el-table-column prop="toDate" label="截止时间"></el-table-column>
			<el-table-column prop="fillDate" label="操作时间"></el-table-column>
			<el-table-column label="操作" width="120">
				<template slot-scope="scoped">
					<div class="row" @click.stop="handleDetail(scoped.row)">
						<span style="color: rgba(64, 158, 255, 1);cursor: pointer;">查看详情</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			class="systemPagination"
			:current-page="pageIndex"
			:page-sizes="[originPageSize, 20, 30, 40]"
			:page-size="pageSize"
			layout="sizes,slot, prev, pager, next, jumper"
			:total="totalCount"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
			<span class="totalCount">从{{start}}到{{end}}/共{{totalCount}}条数据</span>
		</el-pagination>
		<div :class="[fullScreen?'fullScreen':'','workDeliverDetail']" v-if="workDeliverDetailShow">
			<div class="topbar">
				<span class="title">{{workDeliverDetailTitle}}</span>
				<div class="buttons">
					<span class="icon iconfont iconquanping" v-if="!fullScreen" @click="fullScreen=true"></span>
					<span class="icon iconfont iconquanpingsuoxiao" v-else @click="fullScreen=false"></span>
					<span class="icon iconfont iconbiaoqianlan-guanbi" @click="workDeliverDetailShow=false"></span>
				</div>
			</div>
			<div class="content-wapper">
				<div class="content-before">123</div>
				<div class="operations-wrapper">
					<span class="icon iconfont iconliucheng-huitui"></span>
					<span class="icon iconfont iconliucheng-huitui"></span>
					<span class="icon iconfont iconliucheng-huitui"></span>
				</div>
				<div class="content-after">456</div>
			</div>
			<div class="buttons-wrapper">
				<div class="btnConfirm">
					<span>确定</span>
				</div>
				<div class="btnConfirm" @click="workDeliverDetailShow=false">
					<span>取消</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	workDeliverList,
	workDeliverDetail,
} from '@/system/api/organization/workDeliver.js'

export default {
	data() {
		return {
			workDeliver: {},
			tableData: [],
			totalCount: 0,
			pageIndex: 1,
			totalCount: 0,
			pageSize: 10,
			workDeliverDetailShow: false,
			workDeliverDetailTitle: '新增移交',
			fullScreen: false,
			tableHeight: 0,
			originPageSize: 0,
			start: 0,
			end: null,
		}
	},
	async mounted() {
		await this.getTableHeight()
		this.pageInitialization(this.pageIndex)
	},
	methods: {
		// table高度
		getTableHeight() {
			let contentHeight = document.getElementsByClassName(
				'content-wrapper'
			)[0].offsetHeight
			let searchesHeight = document.getElementsByClassName(
				'searches-wrapper'
			)[0].offsetHeight
			this.tableHeight = contentHeight - searchesHeight - 92
			let tableBodyHeight = this.tableHeight - 40
			this.pageSize = parseInt(tableBodyHeight / 40)
			this.originPageSize = this.pageSize
		},
		//  页面初始化
		pageInitialization(start) {
			const param = {
				start: start - 1,
				limit: this.pageSize,
				fromUser: this.workDeliver.fromUser, // 移交人
				toUser: this.workDeliver.toUser, // 接手人
				name: this.workDeliver.name, // 工作内容、移交人、接收人
			}
			workDeliverList(param).then((res) => {
				if (res.success) {
					this.tableData = res.info
					this.totalCount = res.totalCount
					this.end =
						res.totalCount % this.pageSize === 0
							? parseInt(res.totalCount / this.pageSize)
							: parseInt(res.totalCount / this.pageSize) + 1
				} else {
					this.message(res.msg, 3)
					return
				}
			})
		},
		// 编辑
		async handleDetail(row) {
			if (row.id) {
				const detail = await workDeliverDetail({ id: row.id })
				this.workDeliverDetailTitle = '编辑移交'
			} else {
				this.workDeliverDetailTitle = '新增移交'
			}
			this.fullScreen = false
			this.workDeliverDetailShow = true
		},
		// 查询
		search() {
			this.pageInitialization(this.pageIndex)
		},
		// 翻页
		handleCurrentChange(pageIndex) {
			this.pageInitialization(pageIndex)
		},
		// 显示条数
		handleSizeChange(size) {
			this.pageSize = size
			this.pageInitialization(this.pageIndex)
		},
	},
}
</script>

<style lang="scss" scoped>
.workDeliver-wrapper {
	position: relative;
	.workDeliverDetail {
		position: fixed;
		top: 132px;
		right: 20px;
		bottom: 20px;
		left: 97px;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0px 5px 20px 0px rgba(67, 103, 211, 0.25);
		border-radius: 6px;
		animation: show 0.4s;
		.topbar {
			width: calc(100% - 8px);
			height: 40px;
			margin: 4px;
			margin-bottom: 12px;
			padding: 0 20px;
			background: rgba(228, 241, 255, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title {
				font-size: 18px;
				color: rgba(0, 0, 0, 1);
			}
			.buttons {
				color: rgba(117, 117, 117, 1);
				.icon {
					cursor: pointer;
					&:last-child {
						margin-left: 20px;
					}
				}
			}
		}
		.content-wapper {
			height: calc(100% - 120px);
			padding: 0 12px;
			div {
				height: 100%;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(209, 211, 225, 1);
				border-radius: 6px;
				float: left;
				width: calc((100% - 43px) / 2);
			}
			.operations-wrapper {
				display: flex;
				flex-direction: column;
				width: 43px;
				justify-content: center;
				border: none;
				.icon {
					cursor: pointer;
					color: rgba(101, 101, 101, 1);
					font-size: 24px;
					margin-bottom: 13px;
				}
			}
		}
		.buttons-wrapper {
			height: 64px;
			display: inline-flex;
			justify-content: flex-end;
			width: 100%;
			padding-top: 16px;
			padding-right: 21px;
			div:last-child {
				margin-left: 20px;
			}
		}
		&.fullScreen {
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 9999;
			background: rgba(255, 255, 255, 1);
		}
	}
}
</style>